<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container">
			<el-input placeholder="请输入内容" v-model="listQuery.seqName" style="width: 300px;">
				<template slot="prepend">序列名称：</template>
			</el-input>
			<el-date-picker v-model="listQuery.startTime" style="width: 300px;margin-left: 35px;" type="datetime" placeholder="申请开始时间：">
			</el-date-picker>
			<el-date-picker v-model="listQuery.endTime" style="width: 300px;margin-left: 35px;" type="datetime" placeholder="申请结束时间：">
			</el-date-picker>
			<el-select v-model="listQuery.checkStatus" placeholder="审核状态：" style="width: 300px;margin-left: 30px;">
				<el-option v-for="(value,key) in applyStatus" :key="key" :label="value" :value="key">
				</el-option>
			</el-select>
		<el-button type="primary" icon="search" style="margin-left: 50px;" @click="findSeqApply()">查询</el-button>
		</div>


		<el-table :data="list" v-loading="listLoading" element-loading-text="别着急，喝杯咖啡。。。" stripe border style="width: 100%;">
			<el-table-column prop="date" align="center" label="序列名称">
				<template scope="scope">
					<span>{{scope.row.seqName}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="bankkey" align="center" label="租户标识">
				<template scope="scope">
					<span>{{scope.row.bankkey}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="序列业务场景">
				<template scope="scope">
					<span>{{scope.row.seqBusiScene}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="序列初始值">
				<template scope="scope">
					<span>{{scope.row.seqOriginalValue}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="字符长度">
				<template scope="scope">
					<span>{{scope.row.charLength}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="前缀">
				<template scope="scope">
					<span>{{scope.row.prefix}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="日期格式">
				<template scope="scope">
					<span>{{scope.row.appendDateFormat}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="步长">
				<template scope="scope">
					<span>{{scope.row.seqStepLength}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="序列最大值">
				<template scope="scope">
					<span>{{scope.row.seqMaxValue}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="是否连续">
				<template scope="scope">
					<span>{{continues[scope.row.seqSerial]}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="所属系统">
				<template scope="scope">
					<span>{{sysSeqHolder[scope.row.seqHolderSys]}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="审核状态">
				<template scope="scope">
					<span>{{applyStatus[scope.row.checkStatus]}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="审批">
				<template scope="scope">
					<el-button type="text" @click="sequenceApply(scope.row)" :disabled="(scope.row.checkStatus !== '1' && scope.row.checkStatus !== '2') || isDisabled">审批</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div v-show="!listLoading" class="pagination-container">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						   :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
						   layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<el-dialog title="序列申请审批" size="tiny" :visible.sync="sequenceApplyCheck">
			<div>审核信息</div>
			<el-form class="small-space" :model="addQuery" label-position="right" label-width="150px">
				<el-form-item label="平台组审核：">
					<el-input v-model="addQuery.seqDapVerifier"></el-input>
				</el-form-item>
				<el-form-item label="平台组审核日期：">
					<el-date-picker v-model="addQuery.seqDapVerifyTime" @change="formatDapVerifyTime" type="date" placeholder="请选择：">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="PMO审核：">
					<el-input v-model="addQuery.seqPomVerifier"></el-input>
				</el-form-item>
				<el-form-item label="PMO审核日期：">
					<el-date-picker v-model="addQuery.seqPomVerifyTime" @change="formatPomVerifyTime" type="date" placeholder="请选择：">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" v-if="is2 != 2" class="dialog-footer">
				<el-button @click="dialogFormVisible = false" >不通过</el-button>
				<el-button type="primary" @click="sequenceApplyUpdate()">通过</el-button>
			</div>
			<div slot="footer" v-else class="dialog-footer">
				<el-button type="primary" @click="sequenceApplyDel()">废弃</el-button>
			</div>
		</el-dialog>



	</div>
</template>
<script>
	import { findSeqApply, sequenceApplyUpdate } from '@/api/sequence/sequence'
	export default {
		name: 'appManage',
		data() {
			return {
				value: null,
				sequenceApplyCheck: false,
				list: null,
				total: null,
				isDisabled: false,
				is2: false,
				listLoading: true,
				listQuery: {
					start: 1,
					limit: 20,
					seqName: null,
					startTime: null,
					endTime: null,
					checkStatus: null
				},
				addQuery: {
					seqApplySys: null,
					seqBusiScene: null,
					seqName: null,
					seqOriginalValue: null,
					seqMaxValue: null,
					seqStepLength: null,
					charLength: null,
					prefix: null,
					appendDateFormat: null,
					seqSerial: null,
					seqHolderSys: null,
					seqDapVerifier: null,
					seqDapVerifyTime: null,
					seqPomVerifier: null,
					seqPomVerifyTime: null,
					checkStatus: null
				},
				continues: {
					'0': '否',
					'1': '是'
				},
				sysSeqHolder: {
					'BCS': '计费中心系统',
					'BMS': '统一后管系统',
					'CAP': '客户认证系统',
					'CCL': '客户合约系统',
					'CCS': '卡券管理系统',
					'CIF': '客户信息系统',
					'CIS': '客户交互系统',
					'CMP': '数字营销平台',
					'CMS': '客户管理系统',
					'CRS': '客户权益系统',
					'DAP': '分布式基础平台',
					'DCS': '数字证书管理系统',
					'DFM': '数据文件管理系统',
					'DIP': '数字影像平台',
					'DMP': '分布式监控平台',
					'FRP': '人脸识别平台',
					'IIF': '网络金融综合前置系统',
					'IPP': '互联网支付系统',
					'LCS': '额度中心系统',
					'MFS': '移动前台系统',
					'MMP': '消息管理平台',
					'NAS': '电子账户系统',
					'OIP': '开放互联网平台',
					'PSS': '产品销售系统',
					'RMS': '风险监控系统',
					'RPS': '红包管理系统',
					'SRP': '语音识别系统'
				},
				applyStatus: {
					'0': '新增',
					'1': '申请生效',
					'2': '生效通过',
					'3': '生效不通过',
					'4': '失效'
				},
				temp: {
					name: '',
					description: '',
					email: ''
				},
				dialogFormVisible: false,
				tableKey: 0,
				value8: ''
			}
		},
		created() {
			this.findSeqApply()
		},
		methods: {
			findSeqApply() {
				findSeqApply(this.listQuery).then(response => {
					this.list = response.data.root
					this.total = response.data.total
					this.listLoading = false
				})
			},
			sequenceApply(row) {
				this.addQuery = Object.assign({}, row)
				this.is2 = this.addQuery.checkStatus
				this.sequenceApplyCheck = true
			},
			sequenceApplyUpdate() {
				this.addQuery.checkStatus = 2
				this.isDisabled = true
				sequenceApplyUpdate(this.addQuery).then(response => {
					const h = this.$createElement
					this.findSeqApply()
					this.isDisabled = false
					this.sequenceApplyCheck = false
					this.$notify({
						title: '提示',
						type: 'success',
						message: h('i', { style: 'color: teal' }, '修改成功')
					})
				})
			},
			sequenceApplyDel() {
				this.addQuery.checkStatus = 4
				this.isDisabled = true
				sequenceApplyUpdate(this.addQuery).then(response => {
					const h = this.$createElement
					this.findSeqApply()
					this.isDisabled = false
					this.sequenceApplyCheck = false
					this.$notify({
						title: '提示',
						type: 'success',
						message: h('i', { style: 'color: teal' }, '修改成功')
					})
				})
			},
			handleSizeChange(val) {
				this.listQuery.limit = val
				this.findSeqApply()
			},
			handleCurrentChange(val) {
				this.listQuery.page = val
				this.findSeqApply()
			},
			formatDapVerifyTime(val) {
				this.addQuery.seqDapVerifyTime = val
			},
			formatPomVerifyTime(val) {
				this.addQuery.seqPomVerifyTime = val
			}
		}
	}

</script>
<style lang="scss" rel="stylesheet/scss" scoped>
	.el-dialog{
		.el-form {
			width: 700px;
			margin-left: 130px;
			.el-form-item__content {
				margin-left: 0;
				.el-input, .el-select, .el-textarea {
					margin-left: 10px;
					width: 220px
				}
			}
		}
	}
</style>
